<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-练习作业-axios+swiper.html</title>
    <link rel="stylesheet" href="./swiper/swiper.min.css">
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {

            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 796px;
            height: 326px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            width: 100%;
        }
    </style>
</head>

<body>
    <h1>通过axios请求数据接口获取图片-然后使用swiper实现轮播图效果</h1>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- <div class="swiper-slide">
                <img src="./imgs/01.jpg" alt="">
            </div> -->
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <script src="./js/axios.min.js"></script>
    <script src="./swiper/swiper.min.js"></script>
    <script>
        /**
         * 接口地址: https://picsum.photos/v2/list
         * 请求方式: GET
         * 请求参数: limit: 数值, 需要的图片数量; page 数值, 表示页码
         * 完整示例: https://picsum.photos/v2/list?limit=2
         * 
        */
        /*       
            
            数据接口响应数据结果如下所示:download_url属性为图片在线地址  
            [
                {
                "id": "0",
                "author": "Alejandro Escamilla",
                "width": 5000,
                "height": 3333,
                "url": "https://unsplash.com/photos/yC-Yzbqy7PY",
                "download_url": "https://picsum.photos/id/0/5000/3333"
                },
                {
                "id": "1",
                "author": "Alejandro Escamilla",
                "width": 5000,
                "height": 3333,
                "url": "https://unsplash.com/photos/LNRyGwIJr5c",
                "download_url": "https://picsum.photos/id/1/5000/3333"
                }
            ] 
        */
        var wrapper = document.querySelector('.swiper-wrapper')
        axios({
            url: 'https://picsum.photos/v2/list',
            params: {
                page: 10,
                limit: 5
            }
        }).then(res => {
            if (res.status === 200) {
                var html = ''
                res.data.forEach(item => {
                    html += `
                    <div class="swiper-slide">
                        <img src="${item.download_url}" alt="">
                    </div>
                    `
                })
                wrapper.innerHTML = html

                // 初始化轮播图
                var swiper = new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    paginationClickable: true
                });
            }
        })

    </script>
</body>

</html>